<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 7</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  //监听事件用横线（@add-one），触发事件用驼峰操作（@click="addOne"）
  const app = Vue.createApp({
    data() {
      return {
        num: 1,
      }
    },
    methods: {
      handleAddOne(){
        this.num +=1;
      },
    },
    template: `
      <div><test :content="num" @add-one1="handleAddOne"/></div>
    `
  });


  app.component('test', {
    props: ['content'],
    methods: {
      addOne(){
        this.$emit('addOne1');
      },
    },
    template: `<div @click="addOne">{{content}}</div>`
  })


  const vm = app.mount('#root');
</script>
</html>